<template>
  <div>
    <div class="bonus-wrapper">
      <p>奖金池</p>
      <div class="bonus-wrapper-content">
        <el-row :gutter="30">
          <el-col :span="12">
            <div class="el-col-box">
              <p>分公司</p>
              <div class="content-center">
                <div class="content-center-box">
                  <div class="content-center-item">
                    <div class="item-title">总参与分公司数量：</div>
                    <div class="item-num">{{ chartData.officeJoin }}</div>
                  </div>
                  <div class="content-center-item">
                    <div class="item-title">奖金池金额：</div>
                    <div class="item-num">{{ chartData.officeBounsMent }}</div>
                  </div>
                  <div class="content-center-item">
                    <div class="item-title">开奖时间：</div>
                    <div class="item-num">{{ chartData.officeOpenTime }}</div>
                  </div>
                </div>
              </div>
              <div class="content-center-chartbox">
                <p>分公司排名</p>
                <columnar-chart v-if="chartData.xOfficeData" :xLsit="chartData.xOfficeData" :series="chartData.officeSeries" />
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="el-col-box">
              <p>代理</p>
              <div class="content-center">
                <div class="content-center-box">
                  <div class="content-center-item">
                    <div class="item-title">总参与代理数量：</div>
                    <div class="item-num">{{ chartData.agentJoin }}</div>
                  </div>
                  <div class="content-center-item">
                    <div class="item-title">奖金池金额：</div>
                    <div class="item-num">{{ chartData.agentBounsMent }}</div>
                  </div>
                  <div class="content-center-item">
                    <div class="item-title">开奖时间：</div>
                    <div class="item-num">{{ chartData.agentOpenTime }}</div>
                  </div>
                </div>
              </div>
              <div class="content-center-chartbox">
                <p>代理排名</p>
                <columnar-chart v-if="chartData.xAgentData" :xLsit="chartData.xAgentData" :series="chartData.agentSeries" />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import {
  HeadOfficBounsPoolData
} from "@/api/index/index"
import LineChart from './LineChart.vue'
import ColumnarChart from './ColumnarChart.vue'

export default {
  components: {
    CountTo,
    LineChart,
    ColumnarChart
  },
  data() {
    return {
      chartData: {}
    }
  },
  created() {
    this.getHeadOfficBounsPoolData();
  },
  methods: {
    // 奖金池
    getHeadOfficBounsPoolData() {
      HeadOfficBounsPoolData().then(res => {
        this.chartData = res.data;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.bonus-wrapper {
  background: #fff;
  padding: 20px 16px 0;
  margin-bottom: 32px;

  p {
    font-size: 16px;
    line-height: 18px;
    margin: 0 0 15px;
    color: #666;
  }

  .el-col-box {
    width: 100%;
    padding: 26px;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
    p {
      font-size: 14px;
    }
  }

  .content-center-chartbox {
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
    margin-top: 20px;
    padding: 20px;
  }

  .bonus-wrapper-content {
    padding: 10px 0 40px;
    .content-center {
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      .content-center-title {
        font-size: 16px;
        color: #999999;
        .el-button {
          margin-left: 20px;
        }
      }
      .content-center-box {
        display: flex;
        align-items: center;
        margin-top: 20px;
        .content-center-item {
          padding: 26px;
          background: #fff;
          box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
          border-color: rgba(0, 0, 0, .05);
          display: flex;
          align-items: center;
          margin: 0 12px;
          font-weight: bold;
          .item-title {
            font-size: 16px;
            line-height: 20px;
            color: rgba(0, 0, 0, 0.45);
          }
          .item-num {
            font-size: 20px;
            color: #666666;
            display: flex;
            .icon {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
</style>
